<template>
     <el-table :data="tableData" :loading="tableLoading" style="width: 100%" class="table">
        <el-table-column prop="unid" label="unid" align="center"/>
        <el-table-column prop="username" label="用户名" align="center"/>
        <el-table-column prop="nickname" label="昵称" align="center"/>
        <el-table-column prop="vipLevel" label="vip等级" align="center"/>
        <el-table-column label="操作" align="center">
            <el-button type="primary">
                编辑
            </el-button>
            <el-button type="danger">
                删除
            </el-button>
        </el-table-column>
    </el-table>

    <!-- <dialog 
    :visible="dialogVisible"
    :title="dialogTitle"
    @closed="close"
    :dialogFormData="dialogFormData" 
    ></dialog> -->
</template>

<script setup>
import {onMounted, ref} from "vue"
import * as api from "@/api/users.js"
import dialog from "@/components/dialog/index.vue"
// 表格数据
let tableData = ref([])
// 加载动画
let tableLoading = ref(false)


// 发送请求，获取数据
let getAllUsers = async () => {
    // 开启加载动画
    tableLoading.value = true
    try{
        // 获取所有用户信息
        let res = await api.getAllUsers()
        // console.log(res)
        // 给tableData数据赋值
        tableData.value = res.data.data
        // 关闭加载动画
        tableLoading.value = false
    }catch(e){
        // 关闭加载动画
        tableLoading.value = false
        console.log(e)
    }
}

// 获取列表信息
onMounted(()=>{
    getAllUsers()
})


// dialog对话框
// let dialogFormData = reactive({
//     unid:{
//         label:"unid",
//         value:''
//     },
//     username:{
//         label:"用户名",
//         value:''
//     },
//     nickname:{
//         label:"昵称",
//         value:''
//     },
//     vipLevel:{
//         label:"vip等级",
//         value:''
//     },
    
// })



// 删除数据


</script>


<style lang="less" scoped>
.table{
    :deep(.el-table__row){
        height: 80px;
    }

    .el-button{
        width: 60px;
        height: 40px;
    }

}




</style>